<template>
  <div>
   名字 <input type="text" v-model.number="name">
   性别 <input type="text" v-model.number="age">

   <h3>{{  fullname () }}</h3>
   {{  reverseMsg()  }}
   
   <hr>


   <input type="text" v-model="msg">
   <h3>{{rmsg}}</h3>

   <hr>
   <ul>
    <li v-for="(item,index) in arr" :key="index">
      {{ item }}
    </li>
   </ul>
   <h2>
    {{  total }}
   </h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      msg: '',
      arr:[10,10,10]
    }
  },
  computed: {
    reverseMsg() {
      console.log('我执行了')
      return this.msg.split('').reverse().join('')
    }
  },
    total() {
      return this.arr.reduce((prev, curr) => {
        return prev + curr
      },0)
    },
      fullname(){
      return this.name + this.age  
    },
    rmsg() {
      return this.msg.split('').reverse().join('')
    }
  }

</script>

<style>

</style>